<template>
  <!-- 仅当不是空布局时显示主框架 -->
  <div class="cyber-container" v-if="showMainLayout">
    <!-- 顶部导航栏 -->
    <div class="cyber-header" v-if="showHeader">
      <!-- 系统LOGO -->
      <div class="system-brand">
        <div class="hologram-logo">
          <img src="@/assets/logo.png" class="logo-core">
          <div class="hologram-grid"></div>
        </div>
        <span class="system-title">智慧园区中枢系统</span>
      </div>

      <!-- 导航标签 -->
      <div class="nav-tabs">
        <div 
          v-for="tab in visibleTabs"
          :key="tab.path"
          class="cyber-tab"
          :class="{ 
            'active': isActiveTab(tab.path),
            'require-auth': tab.meta.requiresAuth
          }"
          @click="handleTabClick(tab)"
        >
          <div class="tab-glow"></div>
          <el-icon class="neon-icon">
            <component :is="tab.meta.icon" />
          </el-icon>
          <span class="tab-label">{{ tab.meta.title }}</span>
          <div class="tab-indicator"></div>
        </div>
      </div>

      <!-- 用户面板 -->
      <div class="user-panel" v-if="isAuthenticated">
        <div class="cyber-avatar">
          <img :src="userStore.avatar" />
          <div class="hologram-ring"></div>
        </div>
        <el-dropdown>
          <div class="cyber-menu-trigger">
            <el-icon><More /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu class="cyber-menu">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="cyber-main" :class="{ 'guest-mode': !userStore.isAuthenticated }">
      <router-view>
        <template #default="{ Component }">
          <transition name="cyber-fade">
            <component 
              :is="Component"
              v-if="route.meta.layout !== 'empty'"
              :key="route.fullPath"
            />
          </transition>
        </template>
      </router-view>
    </div>

    <!-- 全局状态栏 -->
    <div class="status-bar" v-if="showHeader">
      <div class="status-item">
        <span class="label">系统状态</span>
        <div class="status-led active"></div>
      </div>
      <div class="status-item">
        <span class="label">网络延迟</span>
        <span class="value neon-text">32ms</span>
      </div>
    </div>
  </div>

  <!-- 空布局容器 -->
  <div v-else>
    <router-view />
  </div>
</template>

<script setup>
import { computed, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { pa } from 'element-plus/es/locale/index.mjs'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 固定显示的标签配置
const fixedTabs = [
  {
    path: '/MainLayout',
    name: 'MainLayout',
    
    meta: {
      title: '园区门户',
      icon: 'HomeFilled',
      showTab: true,
      requiresAuth: false
    }
  },
  {
    path: '/systemguide',
    name: 'systemguide',
    meta: {
      title: '系统说明',
      icon: 'InfoFilled',
      showTab: true,
      requiresAuth: false
    }
  },
  {
    path: '/overview',
    name: 'Overview',
    meta: {
      title: '园区概览',
      icon: 'HomeFilled',
      howTab: true,
      requiresAuth: false
    }
  },
  {
  path:'/access',
  name:'Access',
  meta:{
    title:'通行态势',
    icon:'TrendCharts',
    howTab: true,
    requiresAuth: false
  }},
  {
    path:'/security',
    name:'security',
    meta:{
      title:'安防态势',
      icon:'Monitor',
      showTab:true,
      requiresAuth: false
  }},
  {
    path:'/property',
    name:'property',
    meta:{
      title:'物业空间',
      icon:'OfficeBuilding',
      showTab:true,
      requiresAuth: false
  }},
  {
    path:'/control',
    name:'Control',
    meta:{
      title:'大屏控制',
      icon:'Setting',
      showTab:true,
      requiresAuth: false
  }},
  
]

// 计算属性
const isAuthenticated = computed(() => userStore.isAuthenticated)
const showHeader = computed(() => route.meta.layout !== 'empty')
const visibleTabs = computed(() => {
  const dynamicTabs = router.getRoutes()
    .filter(r => r.meta.showTab && r.meta.requiresAuth === isAuthenticated.value)
  
  return [...fixedTabs, ...dynamicTabs].sort((a, b) => a.meta.order - b.meta.order)
})

const handleTabClick = (tab) => {
  if (tab.meta.requiresAuth && !isAuthenticated.value) {
    router.push('/404')
    console.log(2)
  } else {
    console.log(1)
    router.push(tab.path)
   console.log(tab.path)
  }
}
const logout = () => {
  userStore.logout()
  router.push('/')
}

// 修正后的布局显示逻辑
const showMainLayout = computed(() => {
  return route.meta.layout !== 'empty' 
})
// 判断当前激活标签
const isActiveTab = (path) => {
  return route.path === path
}
</script>

<style lang="scss" scoped>
.cyber-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 100%, #0a0e1a 0%, #020308 100%);
  position: relative;
  overflow: hidden;
 

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(0deg, rgba(0, 247, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 247, 255, 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
  }
}

.cyber-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  background: rgba(16, 22, 36, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 247, 255, 0.1);
  position: relative;
  z-index: 2;

  .system-brand {
    display: flex;
    align-items: center;
    margin-right: 40px;

    .hologram-logo {
      width: 40px;
      height: 40px;
      position: relative;
      margin-right: 12px;

      .logo-core {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
      }

      .hologram-grid {
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: 
          linear-gradient(45deg, 
            rgba(0, 247, 255, 0.1) 25%,
            transparent 25%,
            transparent 75%,
            rgba(0, 247, 255, 0.1) 75%),
          linear-gradient(45deg, 
            rgba(0, 247, 255, 0.1) 25%,
            transparent 25%,
            transparent 75%,
            rgba(0, 247, 255, 0.1) 75%);
        background-size: 4px 4px;
        transform: rotate(45deg);
        animation: gridMove 20s linear infinite;
      }
    }

    .system-title {
      font-family: 'Orbitron', sans-serif;
      color: #00f7ff;
      letter-spacing: 2px;
      text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
    }
  }

  .nav-tabs {
    flex: 1;
    display: flex;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .cyber-tab {
      height: 100%;
      padding: 0 25px;
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
      background: linear-gradient(
        to right,
        rgba(0, 247, 255, 0) 0%,
        rgba(0, 247, 255, 0.05) 50%,
        rgba(0, 247, 255, 0) 100%
      );

      &.active {
        background: linear-gradient(
          to right,
          rgba(0, 247, 255, 0.1) 0%,
          rgba(0, 247, 255, 0.2) 50%,
          rgba(0, 247, 255, 0.1) 100%
        );

        .tab-label {
          color: #00f7ff;
          text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
        }

        .neon-icon {
          color: #00f7ff;
          filter: drop-shadow(0 0 5px rgba(0, 247, 255, 0.8));
        }

        .tab-indicator {
          width: 100%;
          background: linear-gradient(90deg, 
            rgba(0, 247, 255, 0) 0%,
            #00f7ff 50%,
            rgba(0, 247, 255, 0) 100%);
        }
      }

      .tab-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 50% 0%, 
          rgba(0, 247, 255, 0.2) 0%,
          transparent 70%);
        opacity: 0;
        transition: opacity 0.3s;
      }

      &:hover {
        .tab-glow {
          opacity: 1;
        }
      }

      .neon-icon {
        font-size: 18px;
        color: #7f95b4;
        margin-right: 8px;
        transition: all 0.3s;
      }

      .tab-label {
        font-family: 'Orbitron', sans-serif;
        color: #7f95b4;
        letter-spacing: 1px;
        transition: all 0.3s;
      }

      .tab-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        transition: all 0.3s;
      }

      &.require-auth:not(.active) {
        opacity: 0.6;
        .tab-label {
          color: #ff4655;
        }
        .neon-icon {
          color: #ff4655;
        }
      }
    }
  }

  .user-panel {
    display: flex;
    align-items: center;
    margin-left: auto;

    .cyber-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      position: relative;
      margin-right: 20px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        z-index: 2;
      }

      .hologram-ring {
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, 
          rgba(0, 247, 255, 0.3),
          rgba(0, 255, 136, 0.3),
          transparent 60%
        );
        border-radius: 50%;
        animation: rotateHalo 6s linear infinite;
      }
    }
  }
}

.cyber-main {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.status-bar {
  height: 30px;
  background: rgba(0, 16, 33, 0.8);
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-top: 1px solid rgba(0, 247, 255, 0.1);

  .status-item {
    display: flex;
    align-items: center;
    margin-right: 30px;

    .label {
      color: #7f95b4;
      margin-right: 8px;
      font-size: 12px;
    }

    .status-led {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff4655;
      box-shadow: 0 0 5px #ff4655;

      &.active {
        background: #00ff88;
        box-shadow: 0 0 8px #00ff88;
      }
    }

    .neon-text {
      color: #00f7ff;
      text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
    }
  }
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 40px 40px; }
}

@keyframes cyber-slide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cyber-slide-enter-active {
  animation: cyber-slide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cyber-slide-leave-active {
  animation: cyber-slide 0.4s reverse;
}

/* 新增访客模式样式 */
.cyber-main.guest-mode {
  padding-top: 20px;
  background: rgba(0, 16, 33, 0.9);
  
  /* 确保内容可见 */
  overflow: visible;
  height: auto;
  min-height: calc(100vh - 60px);
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh; /* 使其占满整个视口高度 */
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: auto; /* 允许内容滚动 */
}
</style>
